﻿@{
    ViewBag.Title = "MaterialManage";
    Layout = null;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <link href="~/libs/layui-v2.5.6/layui/css/layui.mobile.css" rel="stylesheet" />
</head>
<body>
    <div style="width:20%;height:740px;float:left">
        <div class="layui-input-wrap" style="margin:13px;width:90%">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-search"></i>
            </div>
            <input type="text" id="SysName" name="SysName" placeholder="请输入分类名称" class="layui-input" onchange="MaterialTreeAjax()">
        </div>
        <div id="ID-tree-demo-showLine" style="height:740px;width:65%"></div>
    </div>

    <div style="width:79%;height:740px;float:right">
        <form class="layui-form layui-row layui-col-space16" style="margin-bottom:8px;margin-top:6px">
            <div class="layui-inline" style="width:200px;">
                <input type="text" id="materialCode" placeholder="请输入物料编码" class="layui-input" style="width:160px">
            </div>
            <div class="layui-inline" style="width:200px;">
                <input type="text" id="materialName" placeholder="请输入物料名称" class="layui-input" style="width:160px">
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="layuiTable()">
                    <i class="layui-icon  layui-icon-search"></i>
                    搜索
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border" onclick="MaterialReset()">
                    <i class="layui-icon   layui-icon-refresh"></i>
                    重置
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" onclick="Addapage()">
                    <i class="layui-icon  layui-icon-add-1"></i>
                    新增
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" onclick="deleted()">
                    <i class="layui-icon  layui-icon-delete"></i>
                    删除
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange">
                    <i class="layui-icon  layui-icon-upload"></i>
                    导入
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange">
                    <i class="layui-icon  layui-icon-download-circle"></i>
                    导出
                </button>
            </div>
        </form>

        <table class="layui-hide" id="tabledata" lay-filter="tabledata"></table>
        <div id="demo-laypage-all"></div>

        <script type="text/html" id="toolDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="update">
                    <i class="layui-icon  layui-icon-edit"></i>
                    编辑
                </a>
                <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="delete" >
                    <i class="layui-icon  layui-icon-delete"></i>
                    删除
                </a>
            </div>
        </script>
    </div>

    <div id="ID-test-layer-wrapper" style="display: none;">
        <form class="layui-form layui-form-pane" lay-filter="Materialform" action="" style="margin:15px" id="Addform">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">物料编码</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="MaterialCode" lay-verify="required" autocomplete="off" placeholder="请输入物料编码" lay-reqtext="请生成或输入物料编码" lay-affix="clear" class="layui-input" >
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <button type="button" class="layui-btn layui-bg-blue" onclick="autoGenerate()">自动生成</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">物料名称</label>
                <div class="layui-input-block">
                    <input type="text" name="MaterialName" autocomplete="off" placeholder="请输入物料名称" lay-verify="required" lay-reqtext="物料名称不能为空" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">规格型号</label>
                <div class="layui-input-block">
                    <textarea name="MaterialTypeCode" placeholder="请输入规格型号" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <select name="Unit" id="Unit" placeholder="请选择" lay-verify="required" lay-reqtext="单位不能为空"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">物料/产品</label>
                <div class="layui-input-block">
                    <select name="MaterialClassificationId" id="MaterialClassificationId" placeholder="请选择" lay-verify="required" lay-reqtext="物料/产品不能为空"></select>
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="IsNo" value="1" title="是" checked>
                    <input type="radio" name="IsNo" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">批次处理</label>
                <div class="layui-input-block">
                    <input type="radio" name="BatchManagement" value="1" title="是" checked>
                    <input type="radio" name="BatchManagement" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">安全库存</label>
                <div class="layui-input-block">
                    <input type="radio" name="SafetyStock" value="1" title="是" checked>
                    <input type="radio" name="SafetyStock" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="Remark" placeholder="请输入备注" class="layui-textarea" lay-verify="required" lay-reqtext="备注不能为空"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="text" name="Id" value="" hidden  />
                <input type="text" name="MinStockLevel" value="" hidden />
                <input type="text" name="MaxStockLevel" value="" hidden />
                <button class="layui-btn" lay-submit lay-filter="demo2" >确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    @*<script src="~/Scripts/layui-v2.5.6/layui/lay/modules/leftmenu.js"></script>*@
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        //全局变量
        var data =[];
        var list=[];
        var materialClassification=[];
        var measureUnit=[];
        var treeinfo=[];
        var rowCount=0;
        var pageCount=0;
        var pageIndex=1;
        var pageSize=10;
        var tableStatusdata=[];
        var AddOrUpdate=true;

        //Layui
        var tree = layui.tree;
        var table = layui.table;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var form = layui.form;

        //Layui页面渲染事件
        layui.use(['tree','table','laypage','layer','form'],function(){
            layuitree();
            layuilaypage();
            layuiTable();
            //显示点击行事件
            table.on('tool(tabledata)', function(obj){
                console.log(obj);
                if(obj.event=='delete'){
                    console.log(obj.data.materialCode);
                    deleted(obj.data);
                }
                if(obj.event=='update'){
                    Updatesubmit(obj.data)
                }
            })
            // 提交事件
            form.on('submit(demo2)', function(data){
                var field = data.field; // 获取表单字段值
                console.log(field);
                if(AddOrUpdate){
                    $.ajax({
                        url: "/mainData/AddMaterial",
                        type: "post",
                        async: false,
                        datatype: "json",
                        data:field,
                        success: function (res) {
                            if(res==1){
                                console.log(res);
                                layer.msg('添加成功', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                                console.log(res);
                                layuiTable();
                                closePage();
                            }
                            return false; // 阻止表单跳转
                        }
                    })
                    
                }
                else{
                    // 此处可执行 Ajax 等操作
                    $.ajax({
                        url: "/mainData/UpdateMaterial",
                        type: "post",
                        async: false,
                        datatype: "json",
                        data:field,
                        success: function (res) {
                            if(res==1){
                                console.log(res);
                                layer.msg('编辑成功', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                                layuiTable();
                                closePage();
                            }
                             return false; // 阻止表单跳转
                        }
                    })
                }
            });
        });
        //页面加载事件
        $(function(){
           MaterialClassificationAjax();
           MeasureUnitAjax();
        });
        // 物料产品分类表数据
        function MaterialTreeAjax(){
            var SysName=$("#SysName").val();
            $.ajax({
                url: "/mainData/GetMaterialClassificationTree",
                type: "get",
                async: false,
                datatype: "json",
                data:{
                    product:"物料",sysName:SysName
                },
                success: function (res) {
                   data =res
                }
            })
        }
        // 物料表数据
        function MaterialAjax(){
            var materialCode=$("#materialCode").val();
            var materialName=$("#materialName").val();
            $.ajax({
                url: "/mainData/GetMaterialList",
                type: "get",
                async: false,
                datatype: "json",
                data:{
                    pageIndex:pageIndex,
                    pageSize:pageSize,
                    materialCode:materialCode,
                    materialName:materialName,
                    materialClassificationId:treeinfo.id
                },
                success: function (res) {
                    list =res.queryable;
                    rowCount=res.rowCount;
                    pageCount=res.pageCount;
                }
            })
        }
        // 物料产品分类表数据
        function MaterialClassificationAjax(){
            $.ajax({
                url: "/mainData/GetMaterialClassification",
                type: "get",
                async: false,
                datatype: "json",
                success: function (res) {
                    materialClassification =res;
                    let option="<option value=''>请选择</option>";
                    materialClassification.forEach(function(item){
                        option+="<option value="+item.id+" >"+item.sysName+"</option>";
                    });
                    $("#MaterialClassificationId").html(option);
                    form.render();
                }
            })
        }
        // 计量单位表数据
        function MeasureUnitAjax(){
            var materialCode=$("#materialCode").val();
            var materialName=$("#materialName").val();
            $.ajax({
                url: "/mainData/GetMeasureUnitDto",
                type: "get",
                async: false,
                datatype: "json",
                success: function (res) {
                    measureUnit =res;
                    let option="<option value=''>请选择</option>";
                    measureUnit.forEach(function(item){
                        option+="<option value="+item.unitCode+" >"+item.unitCode+"</option>";
                    });
                    $("#Unit").html(option);
                    form.render();
                }
            })
        }
        //重置查询信息
        function MaterialReset(){
            $("#materialCode").val("");
            $("#materialName").val("");
        }
        //树形
        function layuitree(){
            MaterialTreeAjax();
            // 渲染
            tree.render({
                elem: '#ID-tree-demo-showLine',
                data: data,
                showLine: false,  // 是否开启连接线
                onlyIconControl: false,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                    treeinfo = obj.data;  //获取当前点击的节点数据
                    layuiTable();
                }
            });
        }
        //显示表格
        function layuiTable() {
            MaterialAjax();
            // 已知数据渲染
            var inst = table.render({
                elem: '#tabledata',
                id: 'materialCode', // 自定义 id 索引
                height: '622px',
                cols: [[ //标题栏
                      {checkbox: true, fixed: true},
                      {field: 'materialCode', title: '物料编码'},
                      {field: 'materialName', title: '物料名称'},
                      {field: 'materialTypeCode', title: '物料型号'},
                      {field: 'unit', title: '单位'},
                      {field: 'materialClassificationId', title: '物料/产品',templet:function(d){
                          return treeinfo.title;
                      }},
                      {field: 'isNo', title: '是否启用', templet: function(d){
                          if(d.isNo === 1){
                              return '<span>是</span>';
                          } else {
                              return '<span>否</span>';
                          }
                      }},
                      {field: 'safetyStock', title: '是否安全库存', templet: function(d){
                          if(d.safetyStock === 1){
                              return '<span>是</span>';
                          } else {
                              return '<span>否</span>';
                          }
                      }},
                      {fixed: 'right', title:'操作', templet: '#toolDemo',width: 140},
                ]],
                data:list,
                //skin: 'line', // 表格风格
                even: true,
                //page: true, // 是否显示分页
                //limits: [5, 10, 15],
                //limit: 5 // 每页默认显示的数量
            });
            layuilaypage();
        };
        //显示分页
        function layuilaypage() {
            // 完整显示
            laypage.render({
                elem: 'demo-laypage-all', // 元素 id
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                count: rowCount, // 数据总数
                limit: pageSize,
                curr:pageIndex,
                limits:[10,20,30],
                jump: function(obj){
                    if(pageIndex!=obj.curr||pageSize!=obj.limit){
                        pageIndex=obj.curr;
                        pageSize=obj.limit;
                        layuiTable();
                    }
                }
            });
        };
        //点击确认事件
        function clickRows(){
           var tableStatus = table.checkStatus('materialCode');
           tableStatusdata=tableStatus.data // 选中行的数据
        }
        //删除事件
        function deleted(code){
            if(code==undefined){
                closePage();
                clickRows();
            }
            else{
                tableStatusdata[0]=code;
            }
            layer.confirm('是否确定删除？', {
                title: false,
                area: ['100px', '125px'],
                btn: ['确定', '取消'], //按钮
                offset: '16px',
                btnAlign: 'c' //按钮水平居中对齐
            },
                function(){
                    console.log(tableStatusdata.length);
                    if(tableStatusdata.length==0){
                        layer.msg('至少选择一项', {
                            time: 1000, // 1s 后自动关闭
                            offset: '16px'
                        });
                        return;
                    }
                    console.log(tableStatusdata);
                    var materialCodes=tableStatusdata.map(x=>x.materialCode);
                    $.ajax({
                        url: "/mainData/DeletedMaterial",
                        type: "post",
                        async: false,
                        datatype: "json",
                        data:{materialCodes:materialCodes.toString()},
                        success: function (res) {
                           if(res==1){
                               layer.msg('删除成功', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                               });
                               layuiTable();
                           }
                           else{
                               layer.msg('删除失败', {
                                   time: 1000, // 1s 后自动关闭
                                   offset: '16px'
                                });
                           }
                        }
                    })
                },
                function(){
                    layer.msg('取消成功', {
                        time: 1000, // 1s 后自动关闭
                        offset: '16px'
                    });
                }
            );
        }
        //添加页面
        function Addapage(){
            AddOrUpdate=true;
            form.val('Materialform', {
                'Id':'0',
                'MinStockLevel':'0',
                'MaxStockLevel':'0',
                'MaterialCode':'',
                'MaterialName':'',
                'MaterialTypeCode':'',
                'Unit': '',
                'MaterialClassificationId': '',
                'IsNo': '1',
                'BatchManagement':'1',
                'SafetyStock':'1',
                'Remark': '',
            });
            form.render('select');
            layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['新增物料/产品', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#ID-test-layer-wrapper'), // 捕获的元素
                area: ['1000px', '800px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }
        //关闭弹出层
        function closePage () {
            layer.close(layer.index); //再执行关闭
        }
        //自动生成事件
        function autoGenerate(){
            var date=new Date();
            var code="IF"+date.getFullYear().toString()+(date.getMonth()+1).toString().padStart(2,'0')+date.getDate().toString().padStart(2,'0')+date.getHours().toString().padStart(2,'0')+date.getMinutes().toString().padStart(2,'0')+date.getSeconds().toString().padStart(2,'0')
           console.log(code);
            $("[name='MaterialCode']").val(code);
        }
        //编辑页面
        function Updatesubmit(data){
            AddOrUpdate=false;
            $("[name='MaterialCode']").attr("disabled",true);
            form.val('Materialform', {
                'Id':data.id,
                'MinStockLevel':data.minStockLevel,
                'MaxStockLevel':data.maxStockLevel,
                'MaterialCode':data.materialCode,
                'MaterialName':data.materialName,
                'MaterialTypeCode':data.materialTypeCode,
                'Unit': data.unit,
                'MaterialClassificationId': data.materialClassificationId,
                'IsNo': data.isNo,
                'BatchManagement': data.batchManagement,
                'SafetyStock': data.safetyStock,
                'Remark': data.remark,
            });
            layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['编辑物料/产品', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#ID-test-layer-wrapper'), // 捕获的元素
                area: ['1000px', '800px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                }
            });
        }
    </script>
</body>
</html>




